<!-- ******发电量****** -->
<template>
  <div class="first-hgcpkc">
    <div class="title-box">
      <div class="title">
        <img src="../../../../assets/img/fadianchang.png" alt="" />发电量
      </div>
      <div class="title-box-one">
        <div class="title-box-one1">
          <span class="title-span1">累计：</span>
          <span class="title-span2">377.00</span>
          <span class="title-span3">亿kw/h</span>
        </div>
        <div class="title-box-one1">
          <span class="title-span1">实时：</span>
          <span class="title-span2">17.00</span>
          <span class="title-span3">亿kw/h</span>
        </div>
      </div>
      <div class="title-box-two">
        <p class="title-box-twop1">历年发电总量</p>
        <p class="title-box-twop">单位：千万瓦时</p>
        <div id="titleboxTwo"></div>
      </div>
    </div>
  </div>
</template>
<script>
import "echarts-liquidfill";
import * as echarts from "echarts";
import eventBus from '@/EventBus';
export default {
  name: "first-electricity",
  data() {
    return {};
  },
  created() {
    eventBus.$on('send', (data1, data2, data3) => {
      this.titleboxTwo(data3)
    })
  },
  mounted() {
	this.titleboxTwo()
	  window.addEventListener('resize',()=>{
    this.titleboxTwo()
    })
  },
  methods: {
	titleboxTwo(data3) {
      let titleboxTwo = this.$echarts.init(
        document.getElementById("titleboxTwo")
      );
      window.addEventListener("resize", function () {
        titleboxTwo.resize();
      });
	       function fontSize(res){
    	let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res*fontSize;
	}
	  titleboxTwo.setOption({
    backgroundColor: '#0e1825',
    tooltip: {
        trigger: 'axis',
        show: false,
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    legend: {
        show:false
    },
    grid: {
		top:'3%',
        left: '3%',
        right: '12%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        splitLine: {
            show: false
        },
        type: 'value',
        show: false,
    }],
    yAxis: [{
        splitLine: {
            show: false
        },
        axisLine: { //y轴
            show: false
        },
        type: 'category',
        axisTick: {
            show: false
        },
        data: ['2015', '2016', '2017', '2018', '2019','2020','2021'],
		
        axisLabel: {
            color: '#fff',
			// fontSize:45   
		  fontSize:fontSize(4.5)  
			  }
    }],
    series: [{
        name: '标准化',
        type: 'bar',
        barWidth: '30%', // 柱子宽度
        label: {
            show: true,
            position: 'right', // 位置
            color: '#ffffff',
				fontSize:fontSize(4.9) ,
			//  fontSize: 49,
            // fontSize: 14,
            fontWeight: 'bold', // 加粗
            distance: 5 // 距离
        }, // 柱子上方的数值
        itemStyle: {
            // barBorderRadius: [20, 20, 20, 20], // 圆角（左上、右上、右下、左下）
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                '#11213a', '#7fa7f0'
            ].map((color, offset) => ({
                color,
                offset
            }))), // 渐变
        },
        data: data3 || [320, 302, 341, 374, 390,270,180]
    }, ]
	  })
	},
	

	}

};

</script>

<style lang="scss" scoped>
.first-hgcpkc {
  width: 100%;
  height: 3240px;
  //   background-size: 100% 100%;
  .title-box {
    width: 100%;
    height: 100%;
    .title {
      width: 2380px;
      margin-top: 110px;
      height: 217px;
      padding-left: 65px;
      line-height: 217px;
      font-size: 145px;
      color: #e3f6fa;
      background-color: #1a2a44;
      letter-spacing: 10px;
      // display: inline-block;
      vertical-align: middle;

      img {
        width: 145px;
      }
    }
  }
  .title-box-one {
    padding-top: 100px;
    width: 100%;
    height: 920px;
    padding-left: 157px;
   
    font-size: 115px;
    text-align: left;
    line-height: 300px;
    .title-box-one1 {
      .title-span1 {
        color: #6fcf87;
      }
      .title-span2 {
        color: #b4fe51;
      }
      .title-span3 {
        color: #fff;
      }
    }
  }
  .title-box-two {
    float: left;
    width: 100%;
    height: 1995px;
    // background-color: rgb(202, 83, 83);

    .title-box-twop1 {
       font-size: 80px;
      width: 100%;
      height: 150px;
      background-image: -webkit-linear-gradient(top, #ffffff, #bdd0f7, #70a1ff);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;
      color: #7faeff;
    }
    .title-box-twop {
	text-align: right;
	padding-right: 400px;
     font-size: 40px;
      width: 100%;
     
      background-image: -webkit-linear-gradient(top, #ffffff, #bdd0f7, #70a1ff);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;
      color: #7faeff;
     
    }
  }
}
#titleboxTwo {
  width: 100%;
  height: 1500px;
 
}
</style>
